import React from 'react';
import Flex from '../Flex/Flex';
import { StyledField } from './Field.styled';
import { TField } from './Field.types';

/**
 * @function Button - Компонент поля с меткой.
 * @param {TField} props - Свойства для компонента Field.
 * @return {ReactElement} Отображаемый компонент поля.
 */
const Field: React.FC<TField> = ({ label, children, displayInline, ...nextProps }) => (
  <Flex flexDirection={displayInline ? "row" : "column"} inline={displayInline}>
    <StyledField displayInline={displayInline} {...nextProps}>{label}</StyledField>
    {children}
  </Flex>
);

export default Field;
